import dataArr from "../assets/data/人口数量变化.js";
export default {
    mounted() {
        // 动态柱状图
        this.acrossEcharts(this.processData(dataArr));
    },
    methods: {
        // 动态柱状图处理数据方法
        processData(dataArr) {
            return dataArr.map((data) => {
                const cname = data.cname.split(",");
                const cut = data.cut.split(",");
                return {
                    cdate: data.cdate,
                    cname,
                    cut,
                };
            });
        },
        acrossEcharts(dataArr) {
            // 颜色映射表
            //广东,江苏,山东,河南,河北,辽宁,上海,四川,安徽,湖南
            const countryColors = {
                北京: "#003C5D",
                天津: "#003B67",
                上海: "#4D79E6",
                重庆: "#002D43",
                河北: "#003B6F",
                山西: "#002B45",
                辽宁: "#003B6F",
                吉林: "#003B5E",
                黑龙江: "#002D43",
                江苏: "#003B67",
                浙江: "#003C77",
                安徽: "#002D43",
                福建: "#003C54",
                江西: "#1F4C9D",
                山东: "#003C54",
                河南: "#001F2B",
                湖北: "#002D43",
                湖南: "#003C77",
                广东: "#003C5D",
                广西: "#003C5D",
                海南: "#004C77",
                四川: "#002D43",
                贵州: "#003B6F",
                云南: "#002B45",
                陕西: "#002D43",
                甘肃: "#002B45",
                青海: "#003C77",
                宁夏: "#003B5E",
                新疆: "#002D43",
                西藏: "#003C77",
                内蒙古: "#003C5D",
                //广西: "#003B67",
                香港: "#4D79E6",
                澳门: "#4D79E6",
                台湾: "#4D79E6",
            };

            const myChart = echarts.init(document.getElementById("acrossChart"));
            // 更新频率
            const updateFrequency = 3000;
            // 起始年份、名称和数量
            const startYear = dataArr[0].cdate;
            const startName = dataArr[0].cname;
            const startCut = dataArr[0].cut;

            // 初始化图表和配置
            let currentIndex = 0;
            const pauseDuration = 5000; // 完成后暂停时间

            const option = {
                title: {
                    text: "中国各省人口数量随年份变化(2000~2023)",
                    subtext: "数据来源：中国统计局",
                    left: "center",
                    textStyle: {
                        color: "#fff", // 标题文字颜色设置为黑色
                    },
                },
                xAxis: {
                    max: "dataMax", //取数据中的最大值作为最大刻度
                    splitLine: {
                        // 分隔线配置项
                        show: false,
                        color: "rgba(100, 100, 100, 0.)",
                    },
                    axisLabel: {
                        //x轴标签配置项
                        formatter: (n) => Math.round(n / 10000) + "万",
                    },
                },
                dataset: {
                    //数据集配置项，这里使用dataArr作为数据源
                    source: dataArr,
                },
                yAxis: {
                    type: "category", //类型，这里设置为"category"表示分类轴
                    inverse: true, //是否反向显示，这里设置为true表示反向显示
                    max: 25,
                    data: startName, //y轴的刻度标签数据，这里使用startName作为刻度标签
                    axisLabel: {
                        //y轴标签配置项
                        show: true,
                        fontSize: 14,
                        color: "#fff",
                    },
                    animationDuration: 2000, //动画时长 缓动效果
                    animationDurationUpdate: 2000, //排序（柱图上升或者下降）动画完成时间
                },
                series: [
                    {
                        realtimeSort: true, //是否实时排序
                        seriesLayoutBy: "column", //数据排列方式，这里设置为"column"表示按列排列
                        type: "bar", //系列类型，这里设置为"bar"表示柱状图
                        itemStyle: {
                            color: function (param) {
                                //设置每个分类对应的柱状颜色
                                return countryColors[param.name];
                            },
                        },
                        tooltip: {
                            trigger: "axis", // 触发类型为坐标轴触发
                            formatter: function (params) {
                                // `params` 是一个数组，包含了当前轴上所有系列的数据
                                // 由于你的图表类型是柱状图，每个 `params` 元素应该是一个对象
                                // 获取第一个数据项的 `data` 属性，这里假设你的数据项结构类似
                                const param = params[0];
                                const date = param.cdate; // 或者使用 param.name，如果 `name` 是年份
                                const province = param.name; // 根据数据结构获取省份
                                const value = param.cut; // 根据数据结构获取对应人数

                                return `${date}<br>${province}: ${value}人`;
                            }
                        },
                        encode: {
                            //数据映射配置项
                            x: 0, //x轴映射到数据的第0列
                            y: 3, //y轴映射到数据的第3列
                        },
                        label: {
                            //数据标签配置项
                            show: true, //显示数值
                            precision: 2, //保留小数点几位
                            position: "right", //居右
                            valueAnimation: true, //开启数值动画
                            //fontFamily: "monospace", //字体选择
                            color: "#fff",
                            formatter: `{c}人`,
                            // formatter: (c) => Math.round(parseFloat(c)/10000) + "万",
                        },
                        data: startCut, //数据项，这里使用startCut作为数据
                    },
                ],
                animationDuration: 1000, //动画时长 缓动效果
                animationDurationUpdate: 1000, //排序（柱图上升或者下降）动画完成时间
                animationEasing: "linear", //初始动画缓动效果，这里设置为"linear"，表示线性缓动
                animationEasingUpdate: "linear", //数据更新时的动画缓动效果，这里设置为"linear"，表示线性缓动
                graphic: {
                    //图形元素配置项
                    elements: [
                        // 年份样式
                        {
                            type: "text",
                            right: 160,
                            bottom: 60,
                            style: {
                                text: startYear,
                                font: "bolder 60px monospace",
                                fill: "rgba(100, 100, 100, 0.7)",
                            },
                            z: 100,
                        },
                    ],
                },
            };
            // 定义更新函数
            function updateYear(year) {
                option.yAxis.data = year.cname;
                option.series[0].data = year.cut;
                option.graphic.elements[0].style.text = year.cdate;
                myChart.setOption(option);
            }
            // 在所有数据渲染完成后暂停，然后重新播放
            const intervalid = setInterval(() => {
                renderData(); // 重新开始播放数据
            }, dataArr.length * updateFrequency + pauseDuration);

            // 渲染数据的函数
            function renderData() {
                if (currentIndex >= dataArr.length) {
                    currentIndex = 0; // 如果已经渲染完所有数据，重置为第一个数据
                    clearInterval(intervalid);
                }

                const year = dataArr[currentIndex];
                updateYear(year);

                currentIndex++;
                setTimeout(renderData, updateFrequency); // 设置下一个数据的渲染时间
            }

            // 启动渲染数据的循环播放
            renderData();

            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
    }
}
